<template>
  <div class="notice">
    <c-list :bread="bread">
      <!-- <template #contentTopRight>
        <input type="text" placeholder="搜索关键词" class="search" :class="{ 'no-bg': searchValue }" v-model="searchValue" @keyup.enter="goSearch" />
      </template> -->
      <template #content>
        <div class="list">
          <router-link v-for="(item, idx) in dataSource" :key="idx" :to="{ name: 'NoticeDetail', query: { noticeId: item.noticeId } }" :title="item.noticeTitle">
            <div class="n-title">
              <!-- <span class="common-tips tips-new"></span> -->
              <span class="title-span">{{ item.noticeTitle }}</span>
            </div>
            <div>发布时间：{{ $moment(item.createTime).format("YYYY-MM-DD") }}</div>
          </router-link>
        </div>
      </template>

      <template #pagination>
        <a-pagination v-model="pageNum" @change="onChange" :showTotal="(total) => `共${total}条`" show-size-changer :total="total" @showSizeChange="onShowSizeChange" :pageSize.sync="pageSize" />
      </template>
    </c-list>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import { Pagination } from "ant-design-vue";
import CList from "@/components/CList/index.vue";

@Component({
  name: "Notice",
  components: {
    CList,
    APagination: Pagination
  }
})
export default class Notice extends Base {
  private pageNum = 1;
  private total = 0;
  private pageSize = 10;
  private dataSource: any[] = [];
  private searchValue = "";

  private created() {
    this._created();
    this.getList();
  }

  private async getList() {
    const res = await this.$api.NoticeList({
      pageNum: this.pageNum,
      pageSize: this.pageSize
    });
    if (res && res.code === 200) {
      this.total = res.total;
      this.dataSource = res.rows;
    }
  }

  private goSearch() {
    // undo
  }

  private onChange() {
    this.getList();
  }

  private onShowSizeChange() {
    this.pageNum = 1;
    this.getList();
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.notice {
  .search {
    width: 270px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    text-align: center;
    background: url("~@/assets/images/bg-15.png") 70px center no-repeat;

    &.no-bg {
      background: none;
    }
  }

  .common-tips {
    width: 34px;
    line-height: 100%;
    padding: 3px 0;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 0px 8px 0px 8px;
    font-size: 12px;
    flex-shrink: 0;
    margin-right: 6px;
  }

  .list {
    & > a {
      border-bottom: 1px dotted #cccccc;
      display: flex;
      justify-content: space-between;
      // margin-top: 8px;
      .scale(margin-left, 20px);
      .scale(margin-right, 20px);
      .scale(padding-top, 16px);
      .scale(padding-bottom, 16px);
      &:first-child {
        margin-top: 0px;
      }
      &:hover {
        background-color: #f8fafd;
        .n-title {
          color: #2674d5;
        }
      }
    }
  }

  .tips-new {
    color: #e42626;
    border-color: #e42626;
    &::before {
      content: "最新";
    }
  }

  .n-title {
    color: #333333;
    display: flex;
    align-items: center;
    font-size: 16px;
    width: 80%;
  }
  .title-span {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
